/**
 * Copyright (c) 2021 zhaodongyang
   CurtainJs is licensed under Mulan PSL v2.
   You can use this software according to the terms and conditions of the Mulan PSL v2.
   You may obtain a copy of Mulan PSL v2 at:
            http://license.coscl.org.cn/MulanPSL2
   THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
   See the Mulan PSL v2 for more details.
 */

import {Point} from '../../common/js/Point.js'
import {Rect} from '../../common/js/Rect.js'
import guidepage from '../guideexample/guidepage.js'
import prompt from '@system.prompt';

export default {
    data: {
        canShow: true,
        canvasColor: '#FF4455',
        stepNum: 1,
        NEXT_STEP: "nextStep",
        LAST_STEP: "lastStep",
        REPEATS_STEP: "repeats",
        DONE_STEP: "done",
        clickButton: [{
                          text: "",
                          position: new Rect(0, 0, 0, 0)
                      }]
    },
    onShow() {
        let context = this
        setTimeout(function () {
            try {
                let canvas = context.$element('hilightCanvas')
                let contentView = context.$child('contentView')
                guidepage.initHighLightData(contentView)
                context.canvasColor = guidepage.data.canvasColor
                let ctx = canvas.getContext('2d')
                //设置高亮背景色
                ctx.fillStyle = context.canvasColor
                let canvasWidth = canvas.getBoundingClientRect().width
                let canvasHeight = canvas.getBoundingClientRect().height
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                ctx.fillRect(0, 0, canvasWidth, canvasHeight);
                let viewData = guidepage.data.configList
                if (viewData == null || viewData.length < 1) {
                    return
                }
                context.drawFirstPage(ctx, viewData, canvasWidth, canvasHeight)
                // 绘制高亮部分

            } catch (err) {
                console.log("测试打印===err 1===" + err)
            }
        }, 100)

    },
    drawFirstPage(ctx, viewData, canvasWidth, canvasHeight) {
        let context = this
        for (var i = 0; i < viewData.length; i++) {
            let hightLightConfig = viewData[i]
            if (hightLightConfig.isDraw && hightLightConfig.id == 'ivBackground') {
                ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
            }
            if (hightLightConfig.id == 'tvDiy') {
                let text = "可以高亮某一个View";
                context.drawTipText(ctx, hightLightConfig, canvasWidth, text)

                //画下方的按钮
                var rectButton = new Rect((canvasWidth - 100), (canvasHeight - 60), 60, 30);
                context.clickButton.splice(0)
                context.clickButton.push({
                    position: rectButton,
                    id: context.NEXT_STEP
                })
                context.drawRoundedRect(rectButton, 15, ctx, "#FFFFFF", "下一步")
            }

        }
    },
    drawSecondPage(ctx, viewData, canvasWidth, canvasHeight) {
        let context = this
        for (var i = 0; i < viewData.length; i++) {
            let hightLightConfig = viewData[i]
            if (hightLightConfig.isDraw && hightLightConfig.id == 'btCircle') {
                ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
            }
            if (hightLightConfig.id == 'tvDiy') {
                let text = "自动识别圆角或者圆形背景";
                context.drawTipText(ctx, hightLightConfig, canvasWidth, text)

                //画下方的按钮--下一步
                context.clickButton.splice(0)
                var nextButton = new Rect((canvasWidth - 100), (canvasHeight - 60), 60, 30);
                context.clickButton.push({
                    position: nextButton,
                    id: context.NEXT_STEP
                })
                context.drawRoundedRect(nextButton, 15, ctx, "#FFFFFF", "下一步")

                //画下方的按钮--上一步
                var lastButton = new Rect((canvasWidth - 100), (canvasHeight - 100), 60, 30);
                context.clickButton.push({
                    position: lastButton,
                    id: context.LAST_STEP
                })
                context.drawRoundedRect(lastButton, 15, ctx, "#FFFFFF", "上一步")
            }

        }
    },
    drawThirdPage(ctx, viewData, canvasWidth, canvasHeight) {
        let context = this
        for (var i = 0; i < viewData.length; i++) {
            let hightLightConfig = viewData[i]
            if (hightLightConfig.isDraw && hightLightConfig.id == 'tvDiy') {
                ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
            }
            if (hightLightConfig.id == 'tvDiy') {
                let text = "可以自定义形状和padding";
                context.drawTipText(ctx, hightLightConfig, canvasWidth, text)


                //画下方的按钮--结束
                context.clickButton.splice(0)
                var endButton = new Rect((canvasWidth - 100), (canvasHeight - 60), 40, 30);
                context.clickButton.push({
                    position: endButton,
                    id: context.DONE_STEP
                })
                context.drawRoundedRect(endButton, 15, ctx, "#FFFFFF", "结束")

                //画下方的按钮--上一步
                var lastButton = new Rect((canvasWidth - 110), (canvasHeight - 100), 60, 30);
                context.clickButton.push({
                    position: lastButton,
                    id: context.LAST_STEP
                })
                context.drawRoundedRect(lastButton, 15, ctx, "#FFFFFF", "上一步")


                //画下方的按钮--再看一遍
                var repeatButton = new Rect((canvasWidth - 120), (canvasHeight - 140), 80, 30);
                context.clickButton.push({
                    position: repeatButton,
                    id: context.REPEATS_STEP
                })
                context.drawRoundedRect(repeatButton, 15, ctx, "#FFFFFF", "再看一遍")
            }

        }
    },

//画蒙层上面的提示文字
    drawTipText(ctx, hightLightConfig, canvasWidth, text) {
        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF";
        ctx.font = "normal bold 16px Arial,sans-serif";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";


        let textMarginleft = 40 // 绘制的文字距离左测高亮button的左边的距离
        let textMarginRight = 20 // 绘制的文字距离屏幕右边的距离
        let textMarginTop = 30 // 绘制的文字距离左测高亮button顶部的距离
        let textNextLineMargin = 25 // 绘制的文字下一行与上一行之间的间距

        let totalWidth = ctx.measureText(text).width
        let allWidth = canvasWidth - textMarginleft - textMarginRight - hightLightConfig.left - hightLightConfig.width

        if (allWidth >= totalWidth) {
            ctx.fillText(text, (canvasWidth - textMarginRight - totalWidth), (hightLightConfig.top + hightLightConfig.height + textMarginTop));
            return
        }

        let beginX = (hightLightConfig.left + hightLightConfig.width + textMarginleft)
        let maxWidth = canvasWidth - beginX - textMarginRight
        let beginY = hightLightConfig.top + hightLightConfig.height + textMarginTop
        let tempArr = [0]

        var tempStart = 0

        //处理文字过多的情况 记录文字达到边界时的index 到时手动换行
        for (var j = 1; j < text.length; j++) {
            var tempStr = text.substring(tempStart, j)
            var tempWidth = ctx.measureText(tempStr).width
            if (tempWidth >= maxWidth) {
                tempStart = j
                tempArr.push(j)
            }
        }
        tempArr.push(text.length)
        var addY = 0 // 每一行文字距离最开始绘制的时候的距离
        //处理文字过多的情况 根据记录的index 手动将文字分割多行绘制
        for (var m = 0; m < (tempArr.length - 1); m++) {
            var start = tempArr[m]
            var end = tempArr[(m + 1)]
            ctx.fillText(text.substring(start, end), beginX, (beginY + addY));
            addY = addY + textNextLineMargin
        }
    },
//画蒙层上面的确定按钮
    drawRoundedRect(rect, r, ctx, color, text) {
        var ptA = new Point(rect.x + r, rect.y);
        var ptB = new Point(rect.x + rect.width, rect.y);
        var ptC = new Point(rect.x + rect.width, rect.y + rect.height);
        var ptD = new Point(rect.x, rect.y + rect.height);
        var ptE = new Point(rect.x, rect.y);

        // 画button
        ctx.strokeStyle = color;
        ctx.setLineDash([]);
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(ptA.x, ptA.y);
        ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
        ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
        ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
        ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);
        ctx.stroke();

        // 画button的文字
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.font = 12 + "px 黑体";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        let beginX = rect.width / 2 + rect.x
        let beginY = rect.height / 2 + rect.y
        ctx.fillText(text, beginX, beginY);
    },
    dissMiss(e) {
        var touchX = 0
        var touchY = 0
        if (e != null && e.touches != null && e.touches.length > 0) {
            touchX = e.touches[0].localX
            touchY = e.touches[0].localY
        }
        let context = this

        for (var i = 0; i < context.clickButton.length; i++) {
            let clickRecf = context.clickButton[i]
            if (clickRecf.position.contains(touchX, touchY) && clickRecf.id == context.NEXT_STEP) {
                context.stepNum++
                break
            } else if (clickRecf.position.contains(touchX, touchY) && clickRecf.id == context.LAST_STEP) {
                context.stepNum--
                break
            } else if (clickRecf.position.contains(touchX, touchY) && clickRecf.id == context.REPEATS_STEP) {
                context.stepNum = 1
                break
            } else if (clickRecf.position.contains(touchX, touchY) && clickRecf.id == context.DONE_STEP) {
                context.stepNum = 4
                break
            }
        }

        setTimeout(function () {
            try {
                let canvas = context.$element('hilightCanvas')
                context.canvasColor = guidepage.data.canvasColor
                let ctx = canvas.getContext('2d')
                //设置高亮背景色
                ctx.fillStyle = context.canvasColor
                let canvasWidth = canvas.getBoundingClientRect().width
                let canvasHeight = canvas.getBoundingClientRect().height
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                ctx.fillRect(0, 0, canvasWidth, canvasHeight);
                let viewData = guidepage.data.configList
                if (viewData == null || viewData.length < 1) {
                    return
                }
                // 绘制高亮部分
                switch (context.stepNum) {
                    case 1:
                        context.drawFirstPage(ctx, viewData, canvasWidth, canvasHeight)
                        break
                    case 2:
                        context.drawSecondPage(ctx, viewData, canvasWidth, canvasHeight)
                        break
                    case 3:
                        context.drawThirdPage(ctx, viewData, canvasWidth, canvasHeight)
                        break
                    case 4:
                        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                        context.canShow = false
                        break
                    default:
                        break
                }
            } catch (err) {
                console.log("测试打印===err 1===" + err)
            }
        }, 100)


    },
    childToParentClicked(e) {
        const context = this
        context.canShow = e.detail.canShow
        let type = e.detail.type

    },
    onBackPress() {
        const context = this
        if (context.canShow) {
            context.canShow = false
            return true
        } else {
            return false
        }
    },
}
